<template>
    <el-dialog v-model="dialogVisible" title="供应商管理" width="30%" style="min-width: 500px;" draggable>

        <el-form label-position="top">

            <el-row gutter="20">
                <el-col :span="12">
                    <el-form-item label="* 供应商名称">
                        <el-input size="large" :placeholder="'供应商名称'" v-model="requestParam.name"
                            autocomplete="off"></el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="12">
                    <el-form-item label="负责人">
                        <el-input size="large" :placeholder="'负责人'" v-model="requestParam.principalName"
                            autocomplete="off"></el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="12">
                    <el-form-item label="电话">
                        <el-input size="large" :placeholder="'电话'" v-model="requestParam.phone" autocomplete="off">
                        </el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="12">
                    <el-form-item label="手机">
                        <el-input size="large" :placeholder="'手机'" v-model="requestParam.mobile" autocomplete="off">
                        </el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="12">
                    <el-form-item label="邮箱">
                        <el-input size="large" :placeholder="'邮箱'" v-model="requestParam.email" autocomplete="off">
                        </el-input>
                    </el-form-item>
                </el-col>

                <!-- 默认折扣 -->
                <el-col :span="12">
                    <el-form-item label="默认折扣">
                        <el-input size="large" :placeholder="'默认折扣'" v-model="discountInt"
                            autocomplete="off"
                            type="number"
                            max="100"
                            min="1"
                            >
                            <template #append>{{ "%" }}</template>
                        </el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="24">
                    <el-form-item label="地址">
                        <el-input size="large" :placeholder="'地址'" v-model="requestParam.addressDetail"
                            autocomplete="off"></el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="12">
                    <el-form-item label="银行账号">
                        <el-input size="large" :placeholder="'银行账号'" v-model="requestParam.bankAccount"
                            autocomplete="off"></el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="12">
                    <el-form-item label="开户行">
                        <el-input size="large" :placeholder="'开户行'" v-model="requestParam.bankName"
                            autocomplete="off"></el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="24">
                    <el-form-item label="网址">
                        <el-input size="large" :placeholder="'网址'" v-model="requestParam.website" autocomplete="off">
                        </el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="24">
                    <el-form-item label="备注">
                        <el-input size="large" :placeholder="'备注'" v-model="requestParam.remark" autocomplete="off">
                        </el-input>
                    </el-form-item>
                </el-col>
                

            </el-row>


        </el-form>

        <template v-slot:footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="submit()">
                    确定
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>


<script lang="ts" setup>
import { ref, defineEmits, defineExpose, watch } from 'vue';
let dialogVisible = ref(false);
import $kt from '@/vueKantboot';
import { ElLoading, ElMessage } from 'element-plus'
import { de, fa } from 'element-plus/es/locale';

// emits
let emits = defineEmits(['submit']);

// 默认折扣，整数类型
let discountInt = ref(100);

let requestParam = ref({
    "addressCode": null,
    "addressDetail": null,
    "bankAccount": null,
    "discount": null,
    "email": null,
    "gmtCreate": null,
    "gmtModified": null,
    "mobile": null,
    "name": null,
    "phone": null,
    "principalName": null,
    "remark": null,
    "website": null,
    bankName: null,
});

// 是否文件正在上传
let isFileUploading = ref(false);

/**
 * 打开弹窗
 */
let open = (param: any) => {
    discountInt.value = 100;
    if (param) {
        requestParam.value = JSON.parse(JSON.stringify(param));
        if (param.discount) {
            discountInt.value = param.discount * 100;
        }
    }
    if(discountInt.value){
        requestParam.value.discount = discountInt.value / 100;
    }

    dialogVisible.value = true;
}

// 监听discountInt
watch(discountInt, (val) => {
    requestParam.value.discount = val / 100;
})




let submit = () => {

    if (!requestParam.value.name) {
        ElMessage({
            message: '请输入供应商名称',
            type: 'error',
        });
        return false;
    }


    const loading = ElLoading.service({
        lock: true,
        text: 'Loading',
        background: 'rgba(0, 0, 0, 0.7)',
    })

    $kt.request.request({
        url: '/business-goods-web/admin/goodsSupplier/save',
        method: 'post',
        data: requestParam.value,
    }).then((res) => {
        if (res.data.success) {
            ElMessage({
                message: '保存成功',
                type: 'success',
            })
            dialogVisible.value = false;

            loading.close();
            // 提交
            emits('submit');
            dialogVisible.value = false;
            return false;
        }
        ElMessage({
            message: res.data.errMsg,
            type: 'error',
        });
    });



}



// 暴露给父组件的方法
defineExpose({
    open
})


</script>


<style lang="scss" scoped>
.img-uploaded {
    cursor: pointer;
}

.img-uploaded:hover {
    opacity: 0.8;
}
</style>